{% load static %}

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人主页</title>
    <!-- 引入Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入Font Awesome图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        body {
            background-color: #f8f9fa;
            min-height: 100vh;
        }
        .profile-container {
            max-width: 800px;
            margin: 2rem auto;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            overflow: hidden;
        }
        .profile-header {
            background: linear-gradient(135deg, #0d6efd, #3b82f6);
            color: white;
            padding: 2rem 1.5rem;
            text-align: center;
        }
        .avatar-container {
            position: relative;
            width: 150px;
            height: 150px;
            margin: 0 auto -75px;
        }
        .avatar {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
            border: 5px solid white;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
        .avatar-edit {
            position: absolute;
            bottom: 5px;
            right: 5px;
            background-color: white;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: #0d6efd;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            transition: all 0.3s ease;
        }
        .avatar-edit:hover {
            transform: scale(1.1);
        }
        .profile-body {
            padding: 8rem 2rem 2rem;
        }
        .form-group {
            margin-bottom: 1.5rem;
        }
        .form-label {
            font-weight: 500;
            color: #495057;
        }
        .edit-btn {
            cursor: pointer;
            color: #0d6efd;
            transition: color 0.2s;
        }
        .edit-btn:hover {
            color: #0a58ca;
        }
        .social-badge {
            display: inline-flex;
            align-items: center;
            padding: 0.375rem 0.75rem;
            border-radius: 0.375rem;
            background-color: #f1f5f9;
            margin-right: 0.5rem;
            margin-bottom: 0.5rem;
        }
        .social-icon {
            margin-right: 0.5rem;
            font-size: 1.2rem;
        }
        .action-buttons {
            display: flex;
            gap: 1rem;
            margin-top: 2rem;
        }
        .btn-danger {
            background-color: #dc3545;
            border-color: #dc3545;
        }
        .btn-danger:hover {
            background-color: #bb2d3b;
            border-color: #b02a37;
        }
        .bio-text {
            min-height: 60px;
            padding: 0.5rem;
            border-radius: 0.375rem;
            border: 1px solid #ced4da;
            width: 100%;
        }
        .alert-message {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1050;
            animation: fadeIn 0.3s, fadeOut 0.3s 2.7s;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateX(20px); }
            to { opacity: 1; transform: translateX(0); }
        }
        @keyframes fadeOut {
            from { opacity: 1; transform: translateX(0); }
            to { opacity: 0; transform: translateX(20px); }
        }
    </style>
</head>
<body>
<div class="container profile-container">
    <!-- 个人资料头部 -->
    <div class="profile-header">
        <h2>个人资料管理</h2>
        <p>管理您的个人信息和账户设置</p>
    </div>

    <!-- 头像区域 -->
    <div class="avatar-container">
        <img src="" alt="用户头像" class="avatar" id="avatar-img">
        <div class="avatar-edit" id="change-avatar">
            <i class="fas fa-camera"></i>
        </div>
        <input type="file" id="avatar-input" accept="image/*" style="display: none;">
    </div>

    <!-- 个人资料主体 -->
    <div class="profile-body">
        <form id="profile-form">
            {% csrf_token %}
            <!-- 用户名 -->
            <div class="form-group row">
                <label for="username" class="col-sm-3 col-form-label">用户名</label>
                <div class="col-sm-7">
                    <input type="text" class="form-control" id="username" value="张三" readonly>
                </div>
                <div class="col-sm-2">
                    <span class="edit-btn" data-target="username"><i class="fas fa-edit"></i> 编辑</span>
                </div>
            </div>

            <!-- 密码 -->
            <div class="form-group row">
                <label for="password" class="col-sm-3 col-form-label">密码</label>
                <div class="col-sm-7">
                    <input type="password" class="form-control" id="password" value="••••••••" readonly>
                </div>
                <div class="col-sm-2">
                    <span class="edit-btn" data-target="password"><i class="fas fa-edit"></i> 编辑</span>
                </div>
            </div>

            <!-- 手机号 -->
            <div class="form-group row">
                <label for="phone" class="col-sm-3 col-form-label">手机号</label>
                <div class="col-sm-7">
                    <input type="tel" class="form-control" id="phone" value="13800138000" readonly>
                </div>
                <div class="col-sm-2">
                    <span class="edit-btn" data-target="phone"><i class="fas fa-edit"></i> 编辑</span>
                </div>
            </div>

            <!-- 邮箱 -->
            <div class="form-group row">
                <label for="email" class="col-sm-3 col-form-label">邮箱</label>
                <div class="col-sm-7">
                    <input type="email" class="form-control" id="email" placeholder="未设置邮箱">
                </div>
                <div class="col-sm-2">
                    <span class="edit-btn" data-target="email"><i class="fas fa-edit"></i> 编辑</span>
                </div>
            </div>

            <!-- 个人简介 -->
            <div class="form-group row">
                <label for="bio" class="col-sm-3 col-form-label">个人简介</label>
                <div class="col-sm-7">
                    <div class="bio-text" id="bio-display">热爱生活，喜欢编程和旅行。</div>
                    <textarea class="form-control" id="bio-input"
                              style="display: none; min-height: 60px;">热爱生活，喜欢编程和旅行。</textarea>
                </div>
                <div class="col-sm-2">
                    <span class="edit-btn" data-target="bio"><i class="fas fa-edit"></i> 编辑</span>
                </div>
            </div>

            <!-- 社交账号绑定 -->
            <div class="form-group row">
                <label class="col-sm-3 col-form-label">社交账号</label>
                <div class="col-sm-9">
                    <div id="social-accounts">
                        <div class="social-badge">
                            <i class="fab fa-weixin social-icon" style="color: #07C160;"></i>
                            <span>微信已绑定</span>
                            <button type="button" class="btn btn-sm btn-outline-danger ms-2 unbind-btn"
                                    data-social="wechat">解绑
                            </button>
                        </div>
                        <div class="social-badge">
                            <i class="fab fa-qq social-icon" style="color: #12B7F5;"></i>
                            <span>QQ未绑定</span>
                            <button type="button" class="btn btn-sm btn-outline-primary ms-2 bind-btn" data-social="qq">
                                绑定
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 操作按钮 -->
            <div class="form-group row">
                <div class="col-sm-12 action-buttons">
                    <button type="button" class="btn btn-secondary flex-grow-1" id="logout-btn"
                            data-userid="{{ user.user_identity }}">
                        <i class="fas fa-sign-out-alt me-2"></i>退出登录
                    </button>
                    <button type="button" class="btn btn-danger flex-grow-1" id="delete-account-btn">
                        <i class="fas fa-user-times me-2"></i>注销账号
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- 提示消息 -->
<div class="alert alert-success alert-message" style="display: none;" id="alert">
    操作成功！
</div>

<!-- 确认对话框 -->
<div class="modal fade" id="confirm-modal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal-title">确认操作</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="modal-body">
                您确定要执行此操作吗？
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger" id="confirm-action">确认</button>
            </div>
        </div>
    </div>
</div>

<!-- 引入Bootstrap JS和Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script type="module" src="{% static 'js/userHomePage.js' %}"></script>
</body>
</html>
